<template>
	<!-- 评价 -->
	<view class="evaluate" id="view2">
		<p class="eva_title">
			用户评价
		</p>
		<view class="evaluate_box">
			<view class="pingjia">
				<view v-if="activitycmt.length !== 0">
					<view class="pingjia_box" v-for="(row, index) in activitycmt" :key="index">
						<view class="box_top">
							<image :src="row.user.avatar" mode="" class="head"></image>
							<view class="right">
								<p class="name">{{ row.user.userName }}</p>
								<p class="p2">
									<text class="text1">{{ renderTimeYMDHMS(row.cmtTime)}}</text>
								</p>
								<p class="p3">
									<image src="/static/component/star/stars.png" v-for="s in scoreToInt(row.cmtScore)" :key="s" mode=""></image>
									<block v-if="scoreToInt(row.cmtScore) !== 5">
										<image src="/static/component/star/star-no.png" v-for="(s,h) in (5-scoreToInt(row.cmtScore))" :key="h" mode=""></image>
									</block>
								</p>
							</view>
						</view>
						<view class="ping_neirong">{{ row.cmtCont }}</view>
						<view class="ping_img" v-if="row.cmtImg !== null">
							<image :src="s" mode="" v-for="(s,x) in row.cmtImg" :key="x" @click="preview(row.cmtImg, x)"></image>
						</view>
						<view class="likeorreso">
							<view class="cmt_like">
								<image class="cmt_like_pic" src="../../static/component/likeorcmt/likefalseicon.png"></image>
								<view class="cmt_like_num">{{row.cmtLikeNum}}</view>
							</view>
							<view class="cmt_reso">
								<image class="cmt_reso_pic" src="../../static/component/likeorcmt/resoicon.png"></image>
								<view class="cmt_reso_num">{{row.cmtResoNum}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
	
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore	
		},
		onLoad() {
			//this.getActiviyCmt(1, 1, 1);
			this.loadData();
		},
		data() {
			return {
				tmpActivityCmt: [],
				activitycmt: [],
				loadingType: 'more', //加载更多状态
				current: 0,
				totalSize: 100,
			}
		},
		//加载更多
		onReachBottom(){
			this.loadData();
		},
		methods: { 
			//预览图片
			preview(imgs, index){
				uni.previewImage({
					current:index,
					urls:imgs
				})
			},
			//加载评论 ，带下拉刷新和上滑加载
			loadData(type='add', loading) {
				//没有更多直接返回
				if(type === 'add'){
					if(this.loadingType === 'nomore'){
						return;
					}
					this.loadingType = 'loading';
				}else{
					this.loadingType = 'more'
				}
				
				this.current = this.current + 1
				this.getActiviyCmt(1, this.current, 3)
				if(type === 'refresh'){
					this.activitycmt = [];
				}
				
				//this.activitycmt = this.activitycmt.concat(activitycmt);
				console.log(this.activitycmt)
				console.log(this.activitycmt.length)
				console.log(this.totalSize)
				this.loadingType  = this.activitycmt.length >= this.totalSize ? 'nomore' : 'more';
				console.log(this.loadingType)
				if(type === 'refresh'){
					if(loading == 1){
						uni.hideLoading()
					}else{
						uni.stopPullDownRefresh();
					}
				}
			},
			//修改时间格式：年月日时分秒
			renderTimeYMDHMS(date) {
			  var dateee = new Date(date).toJSON();
			  return new Date(+new Date(dateee) + 8 * 3600 * 1000)
						.toISOString()
						.replace(/T/g, ' ')
						.replace(/\.[\d]{3}Z/, '') 
			},
			scoreToInt(actScore) {
				return Math.round(actScore);
			},
			getActiviyCmt(actId, current, size) {
				uni.request({
				    url: 'http://ronin.fun:8888/act/cmt/all',
					data: {
						actId: actId,
						current: current,
						size: size,
					},
				    success: (res) => {
						this.tmpActivityCmt = res.data.data.records;
						this.totalSize = res.data.data.total;
						this.activitycmt = this.activitycmt.concat(this.tmpActivityCmt);
				        console.log(res.data);
				    }
				});

			}
		}
	}
</script>

<style lang="scss">
	.evaluate{
		padding: 0 4%;
		.eva_title{
			height: 70upx;
			margin-top: 10upx;
			line-height: 70upx;
			font-size: 30upx;
			font-weight: bold;
			color: #202020;
			text{
				font-weight: normal;
			}
		}
		.evaluate_box{
			.pingjia {
				background-color: #ffffff;
				overflow: hidden;
				.pingjia_box {
					overflow: hidden;
					margin-top: 20upx;
					padding-bottom: 20upx;
					overflow: hidden;
					border-bottom: 1upx solid #f2f2f2;
					&:last-child {
						border-bottom: none;
						padding-bottom: 10upx;
					}
					.box_top {
						display: flex;
						.head {
							height: 80upx;
							max-width: 80upx;
							min-width: 80upx;
							flex: 1;
							border-radius: 50%;
							float: left;
						}
						.right {
							flex: 1;
							margin-left: 20upx;
							position: relative;
							.name {
								font-size: 26upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: rgba(0, 0, 0, 1);
							}
							.p2 {
								margin-top: 20upx;
								font-size: 24upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: rgba(156, 156, 156, 1);
								.text2 {
									margin-left: 50upx;
								}
							}
							.p3 {
								height: 35upx;
								position: absolute;
								right: 0;
								width: 200upx;
								top: 8upx;
								image {
									width: 35upx;
									height: 35upx;
									float: left;
									margin-left: 5upx;
								}
							}
						}
					}
					.ping_neirong {
						font-size: 28upx;
						margin-top: 20upx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: rgba(0, 0, 0, 1);
						line-height: 50upx;
					}
					.ping_img {
						display: flex;
						flex-wrap: wrap;
						align-items: flex-start;
						align-content: flex-start;
						justify-content: space-between;
						margin-top: 20upx;
						&::after {
							content: '';
							max-width: 29vw;
							min-width: 29vw;
						}
						image {
							max-width: 29vw;
							min-width: 29vw;
							height: 29vw;
							border-radius: 10upx;
							margin-bottom: 20upx;
						}
					}
					.likeorreso {
						.cmt_like {
							display:inline-block;
							margin-left: 470upx;
							width: 80upx;
							height: 50upx;
							.cmt_like_pic {
								vertical-align: bottom;
								width: 50upx;
								height: 50upx;
							}
							.cmt_like_num {
								display:inline-block;
								font-size: 30upx;
								margin-left: 10upx;
								color: #555555;
							}
						}
						.cmt_reso {
							display:inline-block;
							margin-left: 50upx;
							.cmt_reso_pic {
								vertical-align: bottom;
								width: 50upx;
								height: 50upx;
							}
							.cmt_reso_num {
								display:inline-block;
								margin-left: 10upx;
								color: #555555;
							}
						}
					}
				}
			}
		}
	}
</style>
